import { Chrome, GithubPlacement } from "@uiw/react-color";
import { Button, Form, Input, Modal, Select, Radio, Upload, message } from "antd";
import { PlusOutlined } from '@ant-design/icons';
import React, { Component } from "react";
import olMap from '../../utils/olMap'

const FormItem = Form.Item
const { Option } = Select
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 15 }
}

interface PointProps {
    pointVisiable: boolean
    changePointVisible: (e: any) => void
}
{/* 自定义点位添加 */ }
export default class AddPoint extends Component<PointProps> {

    state = {
        typeValue: "fill",    //自定义添加点位默认fill
        color: "#FF0000",
        fileList: [],
    }

    onFinish = (value: any) => {
        const { pointVisiable, changePointVisible } = this.props
        console.log(value);
        const lon = value.lon * 1
        const lat = value.lat * 1
        const color = value.fill ? value.fill.hexa : value.icon.fileList[0]
        const radius = value.radius * 1
        const type = value.type
        olMap.addPoint(lon, lat, color, radius, type)
        changePointVisible(pointVisiable)
        olMap.goView([lon, lat], 15)
    }


    //颜色选择回调
    colorPickerChange = (color: any) => {
        this.setState({
            color: color.hexa
        })
    }

    //自定义点位添加类型选择
    typeChange = (value: any) => {
        this.setState({
            typeValue: value.target.value
        })
    }

    render() {
        const { pointVisiable, changePointVisible } = this.props
        const { typeValue, color, fileList } = this.state
        const props: any = {
            listType: 'picture-card',
            beforeUpload: () => {
                return false
            },
            // onPreview: this.previewImage,
            onChange: (file: any) => {
                this.setState({
                    fileList: file.fileList
                })
            },
            fileList: fileList,
            maxCount: 1,
            accept: ".jpg,.png,jpeg",
            showUploadList: {
                showPreviewIcon: true,
                showRemoveIcon: true,
                showDownloadIcon: false,
            },
        }

        return <Modal title={'自定义点位添加'} visible={pointVisiable} footer={null} onCancel={() => changePointVisible(pointVisiable)} className='pointmodal' width={600} >
            {
                <Form
                    onFinish={this.onFinish}
                >
                    <FormItem
                        name='lon'
                        label='点位的经度'
                        rules={[
                            {
                                required: true,
                                message: "请输入点位的经度",
                            },
                        ]}
                        {...layout}
                    >
                        <Input placeholder="请输入经度" allowClear />
                    </FormItem>
                    <FormItem
                        name="lat"
                        label='点位的纬度'
                        rules={[
                            {
                                required: true,
                                message: "请输入点位的纬度",
                            },
                        ]}
                        {...layout}
                    >
                        <Input placeholder="请输入纬度" allowClear />
                    </FormItem>
                    <FormItem
                        name='radius'
                        label='点位大小'
                        rules={[
                            {
                                required: true,
                                message: "请输入添加点位大小",
                            },
                        ]}
                        {...layout}
                    >
                        <Input />
                    </FormItem>
                    <FormItem
                        name='type'
                        label='添加类型'
                        rules={[
                            {
                                required: true,
                                message: "请选择点位添加类型",
                            },
                        ]}
                        {...layout}
                        initialValue={typeValue}
                    >
                        <Radio.Group onChange={this.typeChange}  >
                            <Radio value={"fill"}>填充</Radio>
                            <Radio value={"icon"}>图案</Radio>
                        </Radio.Group>
                    </FormItem>
                    {typeValue === "icon" ?
                        <FormItem
                            name='icon'
                            label='上传图案'
                            rules={[
                                {
                                    required: true,
                                    message: "请上传点位图标",
                                },
                            ]}
                            {...layout}
                        >
                            <Upload
                                {...props}
                            >
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>上传</div>
                                </div>
                            </Upload>
                        </FormItem> :
                        <FormItem
                            name='fill'
                            label='填充颜色'
                            rules={[
                                {
                                    required: true,
                                    message: "请选择填充颜色",
                                },
                            ]}
                            {...layout}
                            initialValue={color}
                        >
                            <Chrome color={color} onChange={this.colorPickerChange} placement={GithubPlacement.LeftTop} />
                        </FormItem>
                    }
                    <div className="form-button">
                        <FormItem>
                            <Button
                                type="primary"
                                htmlType="submit"
                            >确认</Button>
                            <Button onClick={() => changePointVisible(pointVisiable)}>取消</Button>
                        </FormItem>
                    </div>
                </Form>
            }
        </Modal >;
    }
}


//点聚合添加 
export class AddCluster extends Component<any>{

    onfinish = (value: any) => {
        const { changeClusterVisiable, clusterVisiable } = this.props
        const Cluterpoint = olMap.addMarkerCluster(value.number)
        changeClusterVisiable(clusterVisiable)
        Cluterpoint && message.success("点聚合添加成功")
    }

    render() {

        const { changeClusterVisiable, clusterVisiable } = this.props

        return <Modal title={"添加点聚合"} className="pointmodal" visible={clusterVisiable} footer={null} onCancel={() => changeClusterVisiable(clusterVisiable)} width={600}  >
            <Form
                onFinish={this.onfinish}
            >
                <Form.Item
                    name="number"
                    label="点聚合图标数量"
                    rules={[{ required: true, message: '请输入点聚合图标数量' }]}
                    {...layout}
                >
                    <Input />
                </Form.Item>
                <div className="form-button">
                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                        >确认</Button>
                        <Button onClick={() => changeClusterVisiable(clusterVisiable)}>取消</Button>
                    </Form.Item>
                </div>
            </Form>
        </Modal>
    }
}